<template>
    <div class="flex items-center px-4 py-2 space-x-4 text-xs text-gray-600 border-t shrink-0">

        <div class="">
            <div class="text-lg ">
                <IMingcute:store-line class="mx-auto" />
            </div>
            <div>店铺</div>
        </div>
        <div class="">
            <div class="text-lg ">
                <IAnt-design:customer-service-outlined class="mx-auto" />
            </div>
            <div>客服</div>
        </div>
        <div class="">
            <div class="mx-auto text-lg" @click="isCollect = !isCollect">
                <IAnt-design:star-outlined class="mx-auto" v-show="!isCollect" />
                <IAnt-design:star-filled class="mx-auto" v-show="isCollect" />
            </div>
            <div>收藏</div>
        </div>
        <div class="grid h-full grid-cols-2 gap-4 text-sm text-gray-50 grow">
            <div class="grid bg-orange-400 rounded-full place-content-center" @click="goods.showSku('cart')">
                加入购物车
            </div>
            <div class="grid bg-red-400 rounded-full place-content-center" @click="goods.showSku('buy')">
                立即购买
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { useGoods } from '~/store/modules/goods';
const goods = useGoods();
const isCollect = ref(false)

</script>
    
<style></style>